<template>
  <view class="page-mallindex">
    <view class="tabs-view">
      <view
        v-for="(item, index) in tabs"
        :key="index"
        style="display: flex; align-items: center;"
        :style="index === active ? `color:${$clr}` : ''"
        @tap="clickTab(index)"
        :class="index === active ? 'active-tab' : ''"
      >
        <view>{{ item }}</view>
        <view v-if="active === index" style="display: flex;align-items: center;">
          <image v-if="direction === 1" src="/static/images/pxxh.png" class="pxtb"/>
          <image v-if="direction === 2" src="/static/images/pxxh.png" class="pxtb" style="transform: rotate(180deg);"/>
        </view>
      </view>
      <view style="display: flex;align-items: center;flex-grow: 0;padding: 0 10px;" @tap="filter">
        <van-icon name="filter-o"/>
        <view>筛选</view>
      </view>
      <view class=".theme-color" style="font-weight: 600;line-height: 1; flex-grow: 0;padding-left: 10px;"
            @tap="Biddingrules">交易规则
      </view>
    </view>
    <view class="list-view">
      <view v-for="(project,index) in list" :key="index" @tap="clickDetails(project)" class="menu_div">
        <view class="item-img-view" :style="'background-image: url('+ fileUrl + project.catplj+')'"/>
        <view class="menu_info">
          <view class="menu_title">
            {{ project.chexing ? project.chexing.match(project.pinpai) ? '' : project.pinpai : project.pinpai }}
            {{ project.chexing ? project.chexing.match(project.chexi) ? '' : project.chexi : project.chexi }}
            {{ project.chexing }}
          </view>
          <view>
            <text v-if="project.calich">{{ project.calich }}公里&nbsp;&nbsp;</text>
            {{ project.caccrq }}
          </view>
          <view>
            {{ plbzOptions[project.capfbz] }}/{{ project.capail }}&nbsp;&nbsp;{{ bsxOptions[project.cabisx] }}
          </view>
          <view>
            上架日期：{{ project.cuksrq }}
          </view>
          <view>
            交易状态：{{ jyztOptions[project.cujyzt] }}
          </view>
          <view>
            零售价：
            <text class=".theme-color" style="font-weight: bold; font-size: 1.2em">
              ￥ {{ project.cuqsjg }}
            </text>
          </view>
        </view>
      </view>
      <view style="text-align: center;margin-bottom: 10px;">
        <view v-if="!finished">
          <view class=".loading-view"></view>
          <text>加载中</text>
        </view>
        <view v-else>
          <text>没有更多了</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {dateFormat} from '/src/utils/index'
import {findGZ, findLingShouList} from '/src/api/mall/shopMall'
import {bsxOptions, jyztOptions, plbzOptions} from '/src/constant/auctionProject'
import {cloneDeep} from 'lodash'

definePageConfig({
  navigationBarTitleText: '商城',
  enablePullDownRefresh: true,
  backgroundTextStyle: 'dark',
  'usingComponents': {
    'van-icon': '/static/vant/icon/index'
  }
})

export default {
  components: {},
  computed: {},
  props: {},
  data() {
    return {
      fileUrl: `${process.env.BASE_API}/api/common/file/download?path=`,
      active: 0,
      direction: 0,
      jyztOptions,
      tabs: ['出厂日期', '上架日期', '价格'],
      plbzOptions,
      bsxOptions,
      listQuery: {
        page: 0,
        limit: 10
      },
      filterQuery: {
        xtppdm: [],
        xtcxdm: [],
        bsGroup: [],
        plGroup: [],
        cdGroup: [],
        followGroup: [],
        kslc: '',
        jslc: '',
        bxks: '',
        bxjs: ''
      },
      total: 0,
      list: [],
      finished: false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.getList(1)
    },
    clickTab(index) {
      if (index === this.active) {
        this.direction = (this.direction + 1) % 3
      } else {
        this.direction = 0
      }
      this.active = index
      this.getList(1)
    },
    Biddingrules() {
      findGZ({'type': '1'}).then(res => {
        console.info(res)
        var rule = res.body.data[0]
        if (rule) {
          wx.showModal({
            title: '交易规则',
            content: rule.wxzdbj,
            showCancel: false
          })
        } else {
          wx.showToast({
            title: '暂无规则！',
            icon: 'none',
            duration: 3000
          })
        }
      })
    },
    filter() {
      let pages = getCurrentPages()
      let currPage = pages[pages.length - 1]
      currPage.data.filterQuery = cloneDeep(this.filterQuery)
      currPage.data.doFilter = filterQuery => {
        this.filterQuery = Object.assign({}, this.filterQuery, filterQuery)
        this.getList(1)
        delete currPage.data.filterQuery
        delete currPage.data.doFilter
      }
      wx.navigateTo({
        url: '/pages/mall/filter',
      })
    },
    async getList(isFresh) {
      // 是否刷新
      if (isFresh) {
        this.listQuery.page = 0
      }
      this.listQuery.page++
      wx.showNavigationBarLoading()
      const listQuery = {
        ...this.listQuery,
        order: ['caccrq', 'a.cuksrq', 'a.cuqsjg'][this.active],
        direction: ['', 'desc', 'asc'][this.direction],
        selectppID: (this.filterQuery.xtppdm || []).join(','),
        selectcxID: (this.filterQuery.xtcxdm || []).join(','),
        bsids: (this.filterQuery.bsGroup || []).join(','),
        plids: (this.filterQuery.plGroup || []).join(','),
        cdids: (this.filterQuery.cdGroup || []).join(','),
        gz: (this.filterQuery.followGroup || []).join(','),
        kslc: this.filterQuery.kslc,
        jslc: this.filterQuery.jslc,
        bxks: this.filterQuery.bxks,
        bxjs: this.filterQuery.bxjs
      }
      return findLingShouList(listQuery).then(res => {
        console.info(res, res)
        wx.hideNavigationBarLoading()
        if (isFresh) {
          this.list = []
        }
        this.list.push(...res.body.data)
        this.list.forEach(res => {
          res.caccrq = dateFormat(new Date(res.caccrq), 'YYYY-MM-DD')
        })
        this.total = res.body.total
        this.finished = this.total === this.list.length
      }).catch(e => {
        wx.hideNavigationBarLoading()
      })
    },
    clickDetails(item) {
      wx.navigateTo({
        url: `/pages/mall/lsCarDetail?icut01=${item.icut01}&icut03=${item.icut03}&icut04=${item.icut04}&icag01=${item.icag01}`,
      })
    }
  },
  async onPullDownRefresh() {
    await this.getList(1)
    wx.stopPullDownRefresh()
  },
  onReachBottom() {
    console.info('滑动到底部')
    if (!this.finished) {
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.page-mallindex {
  .tabs-view {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
    background-color: white;

    > view {
      flex-grow: 1;
    }

    .active-tab {
    }
  }

  .list-view {
    font-size: 0.9em;
    padding: 0 20rpx;
    color: #003B90;
  }

  .mask {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16rpx 0rpx 0rpx 16rpx;
    z-index: 100;
    font-size: 1.2em;
    color: white;
  }

  .menu_content {
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 0px;
  }

  .menu_div {
    width: 100%;
    display: flex;
    margin: 20rpx 0;
    //justify-content: space-around;
    background-color: white;
    border-radius: 20rpx;

    .item-img-view {
      background-position: 0 center;
      background-repeat: no-repeat;
      background-size: cover;
      flex: 3 3 33%;
      align-self: stretch;
      border-radius: 20rpx 0px 0px 20rpx;
    }

    .menu_info {
      margin: 25rpx 20rpx 10rpx 20rpx;
      flex: 7 7 75%;

      view {
        margin-bottom: 10rpx;
      }
    }
  }

  .menu_type {
    text-align: center;
    background: orange;
  }

  .menu_ks {
    text-align: center;
    background: skyblue;
    flex-grow: 1;
  }

  .menu_title {
    font-size: 1.1em;
    font-weight: bold;
  }

  .pxtb {
    width: 1.4em;
    height: 0.8em;
  }

  .tab-titile {
  }
}
</style>
